<template>
  <view class="container_page">
    <action-bar :options="navOptions"></action-bar>

    <form class="main">
      <!-- 服务类型 -->
      <view class="formItem"
            v-for="item,i in formItems"
            :key="i">
        <view class="label">{{ item.label }}</view>
        <view class="content">{{ formData[item.prop] }}</view>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  data () {
    return {
      navOptions: {
        statusBar: 'dark',
        left: {
          icon: 'back'
        },
        center: {
          title: '项目信息'
        }
      },

      formData: {}, // 表单数据
      formItems: [
        { label: '服务类型', prop: 'serviceTypeName' },
        { label: '项目名称', prop: 'name' },
        { label: '项目类型', prop: 'typeName' },
        { label: '项目负责人', prop: 'projectHeadName' },
        { label: '项目所在地区', prop: 'areaName' },
        { label: '项目详细地址', prop: 'address' },
        { label: '委托单位', prop: 'entrustUnit' },
        { label: '服务内容', prop: 'contentName' },
      ], // 表单项数据
      loading: false,
    }
  },
  onLoad (options) {
    this.getForm(options.id)
  },
  methods: {
    // 获取表单信息
    getForm (id) {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      this.$store.dispatch("getDetailInfo", id).then((res) => {
        this.formData = res
      }).finally(() => {
        let timer = setTimeout(() => {
          this.loading = false
          uni.hideLoading();
          clearTimeout(timer)
        }, 3000);
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container_page {
  height: 100vh;
  width: 100vw;
  background-color: white;
  .main {
    .formItem {
      padding: 0 24rpx;
      display: flex;
      border-bottom: 2rpx solid #ddd;
      line-height: 80rpx;
      .label {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      .value {
        flex: 1;
        color: #666;
      }

      & > .label {
        width: 38%;
        margin-right: 24rpx;
      }
      & > .value {
        text-align: right;
      }
      .content,
      input {
        flex: 1;
        line-height: 80rpx;
        min-height: 80rpx;
      }
      .doubleRow {
        .value {
          margin-left: 24rpx;
        }
      }
    }
  }
}
</style>
